<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="materialIdVisible"
    :before-close="handleClose"
    width="90%"
  >
    <template slot="title">
      <div :style="titleColor">新增</div>
    </template>
    <el-form
      ref="dataForm"
      :model="dataForm"
      label-position="left"
      label-width="70px"
      :rules="rules"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="单号" class="required" prop="fbillno">
            <el-input v-model="dataForm.fbillno" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位编号" class="required" prop="fsupno">
            <el-input v-model="dataForm.fsupno"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="委托人" class="required" prop="forduser">
            <el-select v-model="dataForm.forduser" placeholder="请选择">
              <el-option
                v-for="item in getListSpeakerId"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请时间" class="required" prop="forddate">
            <el-date-picker
              v-model="dataForm.forddate"
              type="datetime"
              placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="完成时间" class="required" prop="foverdate">
             <el-date-picker
              v-model="dataForm.foverdate"
              type="datetime"
              placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="受理人" class="required" prop="frecuser">
            <el-select v-model="dataForm.frecuser" placeholder="请选择">
              <el-option
                v-for="item in getListSpeakerId"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="受理时间" class="required" prop="frecdate">
            <el-date-picker
              v-model="dataForm.frecdate"
              type="datetime"
              placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="质检费用" class="required" prop="ftotalamt">
            <el-input v-model="dataForm.ftotalamt"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="品项数" class="required" prop="fitemcount">
            <el-input v-model="dataForm.fitemcount"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总件数" class="required" prop="fpiececount">
            <el-input v-model="dataForm.fpiececount"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="dataForm.fexplanation"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs style="width: 100%" type="border-card">
      <el-tab-pane label="质检样品">
        <div class="app-container">
          <el-table :data="list" element-loading-text="正在查询中。。。" border>
                <el-table-column align="left" label="行号" prop="fline" />
                <el-table-column align="left" label="样品编号" prop="fsampleno" />
                <el-table-column align="left" label="样品名称" prop="fsamplename" />
                <el-table-column align="left" label="申请数量" prop="fplanqty" />
                <el-table-column align="left" label="登记数量" prop="frealqty">
                  <template slot-scope="scope">
                    <el-input v-model="scope.frealqty"/>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="采购价" prop="fbuyprice" />
                <el-table-column align="left" label="合计" prop="ftotamt" />
                <el-table-column align="left" label="备注" prop="fmemo" />
              </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
        <el-button
          :style="{
            background: buttonColor.cancel,
            color: buttonColor.colorone,
          }"
          round
          @click="handleClose"
          size="medium"
          >取消</el-button
        >
        <el-button
          :style="{ background: buttonColor.confirm, color: buttonColor.color }"
          round
          @click="UpdateorCreate"
          size="medium"
          >{{ modify == 1 ? "新增" : "修改" }}</el-button
        >
      </div>
      <Tabs ref="Tabs" @materialDialog="materialDialogValue"/>
  </el-dialog>
</template>

<script>
import {
  tableColor,
  titleColor,
  exportColor,
  buttonColor,
} from "@/filters/index";
import Tabs from "./Tabs.vue"
import { create, update} from "@/api/sample/inspection";
import {getFbillno} from "@/api/area";
export default {
  name: "tabs",
  props:["getListSpeakerId"],
  components:{Tabs},
  data() {
    return {
      buttonColor,
      titleColor,
      modify:1,
      from:1,
      list: [],
      list2:[],
      list3:[],
      list4:[],
      statuslist:[
        {val:0,lable:'未检'}
        ,{val:1,lable:'在检'}
        ,{val:2,lable:'检毕'}
        ,{val:3,lable:'留样'}
      ],
      fsteplist:[
        {val:0,lable:'数据申请'}
        ,{val:1,lable:'质检申请'}
        ,{val:2,lable:'来样登记'}
        ,{val:3,lable:'分样下发'}
        ,{val:4,lable:'报告生成'}
        ,{val:5,lable:'报告校核'}
        ,{val:6,lable:'报告审批'}
        ,{val:7,lable:'报告盖章'}
        ,{val:8,lable:'质检取消'}
      ],
      dataForm: {
         fsiteNo: this.$store.state.user.fsiteNo
        ,fbillno:undefined
        ,fsite_no:undefined
        ,fsupno:undefined
        ,forduser:undefined
        ,forddate:new Date()
        ,foverdate:new Date()
        ,frecuser:undefined
        ,frecdate:new Date()
        ,fitemcount:0
        ,fpiececount:0
        ,ftotalamt:undefined
        ,fexplanation:undefined
        ,fupddate:new Date()
        ,foperator:undefined
        ,fcheckdate:new Date()
        ,fcheckuser:undefined
        ,fbillstate:1
      },
      dataForm1:{
        fbillno:undefined,
        fline:1,
        fsampleno:undefined,
        fbuyprice:undefined,
        fplanqty:0,
        frealqty:0,
        ftotamt:0,
        fsamplename:undefined,
        fmemo:undefined
      },
      materialIdVisible:false,
      rules:{
         fclassstname:[{required: true, message: '不能为空' }]
        ,fsupno:[{required: true, message: '不能为空' }]
        ,forduser:[{required: true, message: '不能为空' }]
        ,forddate:[{required: true, message: '不能为空' }]
        ,ftotalamt:[{required: true, message: '不能为空' }]
        ,foverdate:[{required: true, message: '不能为空' }]
        ,frecuser:[{required: true, message: '不能为空' }]
        ,frecdate:[{required: true, message: '不能为空' }]
        ,fitemcount:[{required: true, message: '不能为空' }]
        ,fpiececount:[{required: true, message: '不能为空' }]
      },
    };
  },
  created() {
    this.getrequsternumber();
  },
  methods: {
    handleClose() {
      this.$refs["dataForm"].resetFields();
     this.materialIdVisible = false;
    },
    opentabs(row){
      if(row==undefined)
      {
        this.modify=1;
      }
      else
      {
        this.modify=2
        this.dataForm=row;
        this.dataForm.fsiteNo=this.$store.state.user.fsiteNo;
      }
        this.materialIdVisible = true;
    },
    //添加物料
    adddetails(index){
      this.from=index;
      this.$refs.Tabs.open();
    },
    //获取物料
    materialDialogValue(row)
    {
      this.dataForm1.fsampleno=row.data.fsampleno;
      this.dataForm1.fbuyprice=row.data.fbuyprice;
      this.dataForm1.fsamplename=row.data.fsamplename;
    },
    //耗材
    inserthaocai(){
      this.list.push(this.dataForm1)
      this.dataForm1={
        fbillno:undefined,
        fline:this.list.length,
        fsampleno:undefined,
        fbuyprice:undefined,
        fplanqty:0,
        frealqty:0,
        ftotamt:0,
        fsamplename:undefined,
        fmemo:undefined
      }
    },
    //获取单号
    getrequsternumber(){
      getFbillno({ flag: 2017 })
          .then((response) => {
            if (response) {
              this.dataForm.fbillno = response.data.data
            }
          })
          .catch(() => {
            this.dataForm.fbillno = ''
          })
    },
    //新增、修改
    UpdateorCreate() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
             var formMethod = this.modify == 1 ? create : update;
          formMethod(this.dataForm)
            .then((res) => {
              this.$notify.success({
                title: "成功",
                message: "存储资料成功",
              });
              this.$refs["dataForm"].resetFields();
              this.materialIdVisible = false;
            })
            .catch((res) => {
              this.$notify.error({
                title: "失败",
                message: "存储资料失败",
              });
            });
          }
        })
    },
  },
};
</script>
<style>
.fromiput input{
  width: 85% !important;
}
.selectdiv{
 position: relative;
}
.selectico{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2px;
}
</style>